<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" th:src="@{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-treeview/bootstrap-treeview.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-treeview/bootstrap-treeview.min.css}">
<script type="text/javascript" th:src="@{/js/bootStrap-addTabs/bootstrap.addtabs.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootStrap-addTabs/bootstrap.addtabs.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-table/bootstrap-table.min.css}">
<link type="text/css" rel="stylesheet" th:href="@{/js/bootstrap-fileinput/css/fileinput.css}">
<script type="text/javascript" th:src="@{/js/bootstrap-bootbox/bootbox.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-fileinput/js/fileinput.min.js}"></script>
<script th:src="@{/js/bootstrap-fileinput/js/locales/zh.js}"></script>

<body>
<button class="btn btn-primary"  data-toggle="modal" data-target="#addLayer">添加</button>
<table id="myTable"></table>
<!--记录添加弹出层 -->
<div class="modal fade" id="addLayer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">添加类型</h4>

            </div>
            <!--=========================================================================================  -->
            <div class="modal-body">
                <form id="myForm" role="form">
                    <input type="hidden" class="form-control" name="item_id"  >
                    商品名称：<input type="text" class="form-control" name="name"  placeholder="商品名称">
                    商品图片：<input id="file-Portrait" name="img" class="form-control" type="file">
                    商品数量：<input type="text" class="form-control" name="number"  placeholder="商品数量">
                    商品原价：<input type="text" class="form-control" name="initial_price"  placeholder="商品原价">
                    商品秒杀价：<input type="text" class="form-control" name="buy_price"  placeholder="商品秒杀价">
                    商品买点：<input type="text" class="form-control" name="sell_point" placeholder="商品买点">
                    秒杀开始时间：<input type="date" class="form-control" name="start_time" placeholder="秒杀开始时间">
                    秒杀结束时间：<input type="date" class="form-control" name="end_time" placeholder="秒杀结束时间">
                </form>
            </div>
            <!--=========================================================================================  -->
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                <button class="btn btn-primary" type="button" onclick="add()">确认添加</button>
            </div>

        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    function add(){
        $.ajax({
            url:"addSells",
            type:"post",
            data:$("#myForm").serialize(),
            success:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#addLayer").modal('hide');
            }
        })
    }

    //图片上传
    $('#file-Portrait').fileinput({
        language: 'zh', //设置语言
        uploadUrl: "upload11", //上传的地址
        allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
        maxFileCount: 100,
        enctype: 'multipart/form-data',
        showUpload: true, //是否显示上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    });

    /**/
    $("#myTable").bootstrapTable({
        url:"getSells",
        columns:[
            {field:"xuan",checkbox:true},
            {field:"item_id",title:"编号"},
            {field:"name",title:"商品名字"},
            {field:"i_img",title:"图片",formatter:function(value,row,index){
                    return "<img width='50px' height='50px' src='"+value+"'>";
                }},
            {field:"number",title:"库存"},
            {field:"initial_price",title:"原价"},
            {field:"buy_price",title:"秒杀价"},
            {field:"sell_point",title:"商品介绍"},
            {field:"create_time",title:"创建时间"},
            {field:"start_time",title:"开始时间"},
            {field:"end_time",title:"结束时间"},
            {field:"cxz",title:"操作",formatter:function(value,row){
                    var str='<button class="btn btn-info" onclick="del('+row.item_id+')">删除</button>';
                    return str;
                }},
        ],
        pagination:true,
        pageSize:10,
        pageList:[2,4,6,8,10],
        sidePagination: "client",
        toolbar:"#tb",
    })

    function del(id) {

        $.ajax({
            url:"delSells",
            data:{id:id},
            success:function(){
                alert("成功")
                $('#myTable').bootstrapTable('refresh');//刷新表格
                $("#addLayer").modal('hide');
            }
        })

    }
</script>

</html>